// 标题实体类：用于显示大型标题文本，支持淡入淡出效果
class Title extends Entity {
    // 构造函数：初始化标题
    // @param title: 标题文本
    // @param textBackground: 文本背景颜色（默认透明）
    // @param mainBackground: 主背景颜色（默认黑色）
    constructor(title, textBackground = 'rgba(0,0,0,0)', mainBackground = '#000') {
        super();

        // 添加到标题分类桶
        this.buckets.push('title');

        this.textBackground = textBackground;

        // 创建离屏画布并渲染标题
        this.canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT, (ctx) => {
            // 填充主背景
            ctx.fillStyle = mainBackground;
            ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

            // 设置混合模式为挖空效果
            ctx.globalCompositeOperation = nomangle('destination-out');
            ctx.textAlign = nomangle('center');
            ctx.textBaseline = nomangle('middle');
            ctx.font = nomangle('bold 148pt Impact');

            // 渲染多行标题文本
            let y = CANVAS_HEIGHT / 2 - 100;
            for (const line of title.split('\n')) {
                ctx.fillText(line, CANVAS_WIDTH / 2, y);
                y += 200;  // 行间距
            }
        });

        // 初始化淡入淡出相关属性
        this.fromAge = 0;
        this.toAge = 1;
        this.fromAlpha = 1;
        this.toAlpha = 1;
    }

    // 设置淡入淡出效果
    // @param fromAlpha: 起始透明度
    // @param toAlpha: 目标透明度
    // @param duration: 过渡时间
    // @returns: Promise，当过渡完成时解决
    fade(fromAlpha, toAlpha, duration) {
        this.fromAge = this.age;
        this.toAge = this.fromAge + duration;
        this.fromAlpha = fromAlpha;
        this.toAlpha = toAlpha;
        return this.agesBy(duration);
    }

    // 计算当前透明度
    get alpha() {
        return interpolate(this.fromAlpha, this.toAlpha, (this.age - this.fromAge) / (this.toAge - this.fromAge));
    }

    // 渲染标题
    // @param camera: 当前相机实体
    render(camera) {
        // 透明度为0时不渲染
        if (this.alpha <= 0) return;
        ctx.globalAlpha = this.alpha;

        // 设置渲染位置（相对于相机）
        ctx.translate(~~camera.x - CANVAS_WIDTH / 2, ~~camera.y - CANVAS_HEIGHT / 2);

        // 绘制文本背景
        ctx.fillStyle = this.textBackground;
        ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

        // 绘制预渲染的标题
        ctx.drawImage(this.canvas, 0, 0);
    }
}
